<template>
	<div class="app-container">
		<comprehensive-table @selection-change="selectionChange" :columns="column" :data="data" @reset="reset"
			@onSubmit="onSubmit">

			<!-- 添加/删除按钮 -->
			<template v-slot:btn>
				<div style="display: flex;justify-content: flex-end">
					<el-button type="primary" @click="add"><el-icon>
							<plus />
						</el-icon> 添加</el-button>
					<el-button type="danger" @click="batchDelete"><el-icon>
							<delete />
						</el-icon>删除</el-button>
				</div>
			</template>

			<!-- 操作列插槽 -->
			<template v-slot:operation="scope">
				<el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">编辑
				</el-button>
				<el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">删除
				</el-button>
			</template>

		</comprehensive-table>
	</div>
</template>
<script>
	var dayjs = require('dayjs')
	import axios from 'axios';
	import ComprehensiveTable from './components/comprehensive.vue'

	const column = [{
			type: 'selection',
			width: 60,
		},
		{
			name: 'id',
			label: '订单编号',
			inSearch: true,
			valueType: 'input',
			width: 100,
		},
		{
			name: 'addressId',
			label: '收货地址',
			valueType: 'input',
			width: 160,
		},
		{
			name: 'commodityId',
			label: '商品id',
			valueType: 'input',
			width: 80,
		},
		{
			name: 'userId',
			label: '用户Id',
			inSearch: true,
			valueType: 'input',
			width: 160,
		},
		{
			name: 'images',
			label: '商品图片',
			width: 160,
			slot: 'images',
		},
		{
			name: 'name',
			label: '订单名称',
			valueType: 'input',
			width: 100,
		},
		{
			name: 'stateId',
			label: '订单状态ID',
			sorter: true,
			valueType: 'input',
			width: 100,
		},

		{
			name: 'createTime',
			label: '创建时间',
			sorter: true,
			valueType: 'input',
			width: 160,
		},
		{
			name: 'modifyTime',
			label: '修改时间',
			sorter: true,
			valueType: 'input',
			width: 160,
		},
		{
			name: 'operation',
			slot: true,
			fixed: 'right',
			width: 180,
		}
	]
	export default {
		components: {
			ComprehensiveTable
		},
		data() {
			return {
				data: [],
				column,
				rowObj: {},
				selectObj: [],
			}
		},
		methods: {
			// 从对象存储中获取图片
			getImage(image) {
				return `http://43.136.172.73/api/v1/file/download?fileName=${image}`
			},
			selectionChange(val) {
				this.selectObj = val
			},
			reset() {
				this.$message.success('触发重置方法');
				this.fetchData()
			},
			onSubmit(childData) {
				const obj = childData;
				const id = childData.id;
				const userId = childData.userId;
				if(obj.id == null && obj.userId == null){
					this.$message.success('至少输入一个查询条件')
				}else{
					if(obj.id !== null && obj.userId !== null){
						this.$message.success('一次只能输入一个查询条件')
					}else{
						if(obj.id !== null){
							axios.get(`http://43.136.172.73/api/v1/order/${id}`, {
									headers: {
										'Authorization': 'sfsdf', // 设置认证token
									}
								})
								.then(response => {
									// 请求成功，可以在这里处理返回的数据
									this.$message.success('查询成功');
									const list = [];
									const order = response.data.data
									list.push(order);
									this.data = list;
								})
								.catch(error => {
									// 请求出错，可以在这里处理错误
									console.error(error);
								});
						}else{
							axios.get(`http://43.136.172.73/api/v1/order/getOrderListByUserId/${userId}`, {
									userId: this.userId,
									headers: {
										'Authorization': 'sfsdf', // 设置认证token
									}
								})
								.then(response => {
									// 请求成功，可以在这里处理返回的数据
									this.$message.success('查询成功');
									this.data = response.data.data
								})
								.catch(error => {
									// 请求出错，可以在这里处理错误
									console.error(error);
								});
						}
					}
				}
				this.$message.success('触发查询方法')
			},
			del(row) {
				this.$confirm(
						'你确定要删除当前项吗?',
						'温馨提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
							draggable: true,
						})
					.then(() => {
						// 构造请求参数
						const ides = [];
						ides.push(row.id);
						console.log(ides);
						axios.delete('http://43.136.172.73/api/v1/order/delete', {
								data: ides,
								headers: {
									'Authorization': 'sfsdf', // 设置认证token
								}
							})
							.then(response => {
								// 请求成功，可以在这里处理返回的数据
								this.$message.success('删除成功');
								this.fetchData()
							})
							.catch(error => {
								// 请求出错，可以在这里处理错误
								console.error(error);
							});
					})
					.catch(() => {
						// 取消删除操作
					});
			},
			//获取订单列表
			fetchData() {
				axios.get('http://43.136.172.73/api/v1/order/list', {
						headers: {
							'Authorization': 'sfsdf',
						}
					})
					.then(response => {
						// 请求成功，可以在这里处理返回的数据
						this.data = response.data.data;
						console.log('orderList', this.data);
					})
					.catch(error => {
						// 请求出错，可以在这里处理错误
						console.error(error);
					})
			}
		},

		mounted() {
			// 在组件挂载完成后，发送请求获取数据
			this.fetchData();
		}
	};
</script>
<style scoped>
	.edit-input {
		padding-right: 100px;
	}

	.cancel-btn {
		position: absolute;
		right: 15px;
		top: 10px;
	}
</style>